<template>
	<view class="lunbo">
		<swiper indicator-dots={true} autoplay={true} interval=3000 circular={true} duration=1000>
			<swiper-item v-for="(v,i) in info" :key="i">
				<image :src="v.content"></image>
			</swiper-item>
		</swiper>
	</view>
	<view class='title'>
		<view>私教</view>
		<view>{{mydata.courseName}}火热预约</view>
	</view>
	<view class='form' v-for='v in myclass'>
		<view>{{v.class}}</view>
		<view>{{v.price}}</view>
	</view>
	<view class='fenye'>
		<view :class="fenye==0?'myclass':''" @click="myfenye(0)">详情</view>
		<view :class="fenye==1?'myclass':''" @click="myfenye(1)">支持会员卡</view>
		<view :class="fenye==2?'myclass':''" @click="myfenye(2)">评论</view>
	</view>
	<view class='mag'>
		<detail v-show='fenye==0?true:false'></detail>
		<PersonalCars v-show='fenye==1?true:false'></PersonalCars>
		<PersonalComment v-show='fenye==2?true:false'></PersonalComment>
	</view>
	<view class='nav'>
		<uni-goods-nav :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
	</view>

</template>
<script>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import detail from './detail.vue'
	import PersonalCars from './PersonalCars.vue'
	import PersonalComment from './PersonalComment.vue'
	export default {
		setup() {
			let data = reactive({
				fenye: 0,
				myclass: [{
						class: '1课时',
						price: '￥800/课时'
					},
					{
						class: '6课时',
						price: '￥700/课时'
					},
					{
						class: '10课时',
						price: '￥600/课时'
					}
				],
				myfenye(n) {
					this.fenye = n
				},
				options: [{
						icon: 'phone',
						text: '联系教练'
					},
					{
						icon: 'redo',
						text: '分享课程'
					}
				],
				buttonGroup: [{
					text: '立即预课',
					backgroundColor: '#00ffff',
					color: '#fff '
				}],
				onClick(e) {
					if (e.index == 0) {
						uni.makePhoneCall({
							phoneNumber: '17612863110'
						})
					}
					if (e.index == 1) {
						console.log(111)
					}
				},
				buttonClick() {
					uni.navigateTo({
						url: '/pages/Appointment/PersonlManag/PersonalClass?data='+encodeURIComponent(JSON.stringify(data.mydata)),
					})
				},
				info: [{
						content: '../../../static/logo.png'
					},
					{
						content: '../../../static/Mall/搜索.png'
					},
					{
						content: '../../../static/Mall/搜索.png'
					}
				],
				current: 0,
				mode: 'round',
				change(e) {
					this.current = e.detail.current
				},
				mydata:[]
			});
			onLoad((option)=>{
				let resdata = JSON.parse(decodeURIComponent(option.data))
				data.mydata=resdata
				// console.log(data.mydata)
			})
			return data
		},
		components: {
			detail,
			PersonalCars,
			PersonalComment

		}
	}
</script>
<style lang="scss">
	.title {
		height: 100rpx;
		display: flex;
		outline: 1px #c8c8c6 solid;
		align-items: center;

		view:first-child {
			width: 100rpx;
			height: 45rpx;
			font-size: 28rpx;
			background-color: orange;
			text-align: center;
			border-radius: 20rpx;
			color: white;
			margin: auto 20rpx;
		}

		;

		view:last-child {
			font-size: 35rpx;
		}
	}

	.form {
		display: flex;
		justify-content: space-between;

		view {
			width: 375rpx;
			height: 70rpx;
			outline: 1px #c8c8c6 solid;
			text-align: center;
			line-height: 70rpx;
		}

		view:last-child {
			color: #00ffff;
		}
	}

	.fenye {
		display: flex;
		outline: 1px #c8c8c6 solid;
		// justify-content:space-around;
		height: 100rpx;
		font-size: 35rpx;
		font-weight: 600;
		line-height: 100rpx;
		color: #a1a1a6;
		margin-top: 20rpx;

		view {
			width: 250rpx;
			text-align: center;
		}
	}

	.myclass {
		color: black;
		border-bottom: 2px solid black;
	}

	.nav {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		z-index: 999;
	}

	.mag {
		margin-bottom: 60rpx;
	}
</style>
